import React, { forwardRef, useEffect } from 'react';

import { useAutoResize } from '@jiaminghi/data-view-react';
import './style.less'
const FullScreenContainer = forwardRef(({
  children, className, style, fullScreen = true, onlyAutoSize = false, divRef,

}, ref) => {
  const { domRef } = useAutoResize(ref);

  useEffect(() => {
    const divRect = divRef?.current?.getBoundingClientRect();
    if (onlyAutoSize) {
      Object.assign(domRef.current.style, {
        width: `${divRect?.width || 0}px`,
        height: `${divRect?.height || 0}px`,
        position: 'fixed',
        zIndex: 999,
        top: `${divRect?.top || 0}px`,
        left: `${divRect?.left || 0}px`,
      });
    } else if (fullScreen) {
      Object.assign(domRef.current.style, {
        width: '100vw',
        height: '100vh',
        overflow: 'hidden',
      });
    }
  });

  return (
    <div
      className={onlyAutoSize ? 'dv-screen-container' : 'dv-full-screen-container'}
      style={{
        ...style,
        width: fullScreen && !onlyAutoSize ? '100%' : style?.width,
        height: fullScreen && !onlyAutoSize ? '100%' : style?.height,
      }}
      ref={domRef}
    >
      {children}
    </div>
  );
});

export default FullScreenContainer;
